<template>
  <view class="user-list cbox">
    <view class="card-item rbox" v-for="(item, idx) in list" :key="idx">
      <view class="avatar"></view>
      <view class="info cbox boxf_1">
        <view class="tit rbox box_y_center">
          <text class="name">{{ item.name }}</text>
          <text class="sub">{{ item.subtitle }}</text>
        </view>
        <view class="tags rbox">
          <text v-for="(item2, idx2) in item.tags" :key="idx2">{{
            item2
          }}</text>
        </view>
        <view class="line rbox box_y_center box_space_b">
          <text class="note">{{ item.skill }}</text>
          <view class="btn" @tap="goPage">点击查看</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    url: {
      type: String
    },
    list: {
      type: Array,
      default: []
    }
  },
  data() {
    return {}
  },
  methods: {
    goPage() {
      wx.navigateTo({
        url: `/pages/${this.url}/${this.url}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.user-list {
  padding: 0 32rpx;
  .card-item {
    padding: 22rpx 18rpx;
    border-bottom: 1rpx solid #e9e9e9;
    .avatar {
      width: 128rpx;
      height: 128rpx;
      border-radius: 50%;
      background-color: #e8d9d9;
    }
    .info {
      margin-left: 30rpx;
      .tit {
        .name {
          font-size: 36rpx;
          line-height: 1;
          color: #333;
        }
        .sub {
          margin-left: 98rpx;
          font-size: 24rpx;
          line-height: 1;
          color: #999;
        }
      }
      .tags {
        margin-top: 10rpx;
        text {
          padding: 6rpx 18rpx;
          font-size: 22rpx;
          line-height: 1;
          color: #999;
          border: 1rpx solid #999;
          border-radius: 20rpx;
          &:not(:first-child) {
            margin-left: 22rpx;
          }
        }
      }
      .line {
        margin-top: 10rpx;
        .note {
          font-size: 24rpx;
          line-height: 1;
          color: #999;
        }
        .btn {
          margin-left: 120rpx;
          padding: 10rpx 24rpx;
          font-size: 28rpx;
          line-height: 1;
          color: #fff;
          background-color: #1de1c3;
          border-radius: 26rpx;
        }
      }
    }
  }
}
</style>